<template>
  <div class="content" :style="contentStyle">
    <div
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
    ></div>
    <Mark :item="item" :index="index" :questionIndex="questionIndex" />
  </div>
</template>

<script>
import Mark from "./mark.vue"
import { mixins } from "@/common/mixins/assignmentMixins.js"
export default {
  components: { Mark },
  mixins: [mixins],
  data() {
    return {
      isLight: false
    }
  },
  computed: {
    //元素属性
    articleStyle(item) {
      return function (item) {
        return {
          position: "absolute",
          transition: "all .5s",
          background: "url(" + item.imageUrl + ")0 0/100% 100%",
          width: item.width,
          height: item.height,
          left: item.left,
          top: item.top,
          zIndex: item.isFront ? 99 : 98,
          filter: this.isLight && this.item.assignmentName === item.name ? "drop-shadow(0px 0px 0.5rem rgb(254, 172, 81))" : ""
        }
      }
    },
    isFinish() {
      return this.item.isFinish
    }
  },
  watch: {
    isFinish: function (isFinish) {
      if (isFinish) {
        this.isLight = true
        setTimeout(() => { this.isLight = false }, 1000)
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
</style>
